<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            min-width: 630px;
            /* 2x (LC fullwidth + CC padding) + RC fullwidth */
        }

        p,
        h3 {
            text-align: center;
            padding: 20px 0;
            margin: 0;
        }

        #container {
            padding-left: 200px;
            /* LC fullwidth */
            padding-right: 190px;
            /* RC fullwidth + CC padding */
        }

        #container .column {
            position: relative;
            float: left;
        }

        #center {
            padding: 10px 20px;
            /* CC padding */
            width: 100%;
            background-color: #d6d6d6;
        }

        #left {
            width: 180px;
            /* LC width */
            padding: 0 10px;
            /* LC padding */
            right: 240px;
            /* LC fullwidth + CC padding */
            margin-left: -100%;
            background-color: #77bbdd;
        }

        #right {
            width: 130px;
            /* RC width */
            padding: 0 10px;
            /* RC padding */
            margin-right: -190px;
            /* RC fullwidth + CC padding */
            background-color: #ff6633;
        }

        #footer,
        #header {
            background-color: #626262;
            width: 100%;
        }

        /* Equal-height columns */
        #container {
            overflow: hidden;
        }

        #container .column {
            padding-bottom: 20010px;
            /* X + padding-bottom */
            margin-bottom: -20000px;
            /* X */
        }

        #footer {
            position: relative;
        }

        /*** IE Fix ***/
        * html #left {
            left: 150px;
            /* RC fullwidth */
        }

        * html body {
            overflow: hidden;
        }

        * html #footer-wrapper {
            float: left;
            position: relative;
            width: 100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background: #fff;
            /* Same as body background */
        }
    </style>
</head>

<body>
    <div id="header">
        <h3>#header</h3>
    </div>
    <div id="container">
        <div id="center" class="column">
            <p>#center</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut
                magnam odio placeat error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
                exercitationem explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt exercitationem
                explicabo repudiandae
                adipisci dolor nisi ex doloribus totam, dicta aperiam. Nobis, numquam aperiam aut magnam odio placeat
                error. Tenetur, natus?
            </p>
        </div>
        <div id="left" class="column">
            <p>#left</p>
        </div>
        <div id="right" class="column">
            <p>#right</p>
        </div>
    </div>
    <!-- <div id="footer">
        <h3>#footer</h3>
    </div> -->

    <!-- =======以下写法是为了解决IE没有在容器底部剪裁列背景========= -->
    <div id="footer-wrapper">
        <div id="footer">
            <h3>#footer</h3>
        </div>
    </div>
</body>

</html>